import * as React from 'react'
import classnames from "classnames";
import styles from './index.less'
import * as TYPINGS from "@/typings/index";

const { useState, useEffect } = React
const SongItem: React.FC<any> = (props: any) => {
  const defaultListItem: any = {
    coverImage: '',
    description: '',
    id: 0,
    labels: [],
    name: '',
  }
  const [item, setItem] = useState<TYPINGS.iList>(defaultListItem);
  useEffect(() => setItem(props.item), [props.item]);
  const handleClk = () => {
    props.bindClk();
  }

  return (
    <div
      className={styles.wrapper}
      style={{ marginTop: props.isFirst ? '0' : '8px' }}
      onClick={() => handleClk()}
    >
      <div className={styles.left}>
        <img src={item.coverImage} className={styles.img} />
      </div>
      <div className={styles.right}>
        <p className={styles.name}>{item.name}</p>
        {
          item.description && <p className={styles.description}>{item.description}</p>
        }
        <div className={styles.labels}>
          {
            item.labels.map((x: string, idx: number) => <span
              className={styles.label}
              style={{ marginLeft: idx === 0 ? '' : '4px' }}
              key={x}
            >
              <i>{x}</i>
            </span>)
          }
        </div>
      </div>
    </div>
  )
}

export default SongItem
